<template>
  <div v-if="activeItem">
    <div class="w-full mx-auto bg-[#0f212e] rounded-lg text-[#b1bac9]">
      <div class="flex w-full flex-col items-center">
        <img
          alt="A trophy illustration"
          class="mb-[6px] w-full"
          :src="getImgUrl(activeItem.active_image)"
        />
      </div>
      <div class="mt-4">
        <div class="text-sm text-gray-400"></div>
        <h1
          class="text-xl font-bold mt-2 flex flex-col gap-1"
          v-if="activeItem.time.type == 'range'"
        >
          <span class="text-sm text-gray-400"
            >{{ $t("page.maneuver.ActivityTime") }}：
            {{ dateTimeZone(activeItem.time.data.start_at, "{y}-{m}-{d}"), main.timeZone }}
            —
            {{ dateTimeZone(activeItem.time.data.end_at, "{y}-{m}-{d}"), main.timeZone }}
          </span>
        </h1>
        <h1 class="text-xl font-bold mt-2 text-[#fff]">
          {{ $t("page.maneuver.ActivityDescription") }}
        </h1>

        <p class="mt-2 leading-relaxed">
          <div v-html="activeItem.brief " class="img_auto"></div>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { mainAct } from "@/store/activeda";
import { dateTimeZone } from "../../../utils/date";
const main = mainAct();
const props = defineProps({
  activeItem: {
    type: Object,
    default: () => {}
  }
});

const getImgUrl = url => {
  console.log("activeItem"), props.activeItem;

  return main.static_base_url + url;
};
</script>

<style lang="scss" scoped>
.img_auto {
  :deep(img) {
    width: auto;
    height: 100%;
  }
}
</style>
